//定义数组存储切换图片的src
var imgs = ["imgs/img0.jpg","imgs/img1.jpg","imgs/img2.jpg","imgs/img3.jpg","imgs/img4.jpg"];
//定义数组存储切换小块的文字
var titles =new Array("图1","图2","图3","图4","图5");
//默认图片索引
var index = 0;

var lb ;//定义存储轮播定时函数


window.onload = function(){
    //自动切换图片
   lb =  setInterval("change()",1500);


    //点击小块切换图片
    var btns = document.querySelectorAll(".item");
    //为小块绑定单击事件
    for(let i = 0; i < btns.length;i++){
            bind(i,btns);
    }




}

//自动切换的函数
function change(){
    
    index++;//每次切换+1 下一张图片

    //图片索引是否当前图片库的长度
    if(index > imgs.length - 1){
        index=0;//当索引已经超过了最后一张图片 回到第一张
    }

    //获取到图片的对象
    var pic = document.querySelector("#img-pic");
    //显示当前索引对应的图片
    pic.src=imgs[index];

    //修改图片下方对应的小块
    //1.获取到所有小块
    var btns = document.querySelectorAll(".item");
    //2.遍历所有小块 找到前图片匹配索引的块并设置样式
    for(let i = 0; i < btns.length;i++){
        if(i == index){//找到了匹配的块
            //文字
            btns[index].innerHTML=titles[index];
            btns[index].style.backgroundColor="aquamarine";

        }else{//其他块
            //index是图片的索引  我们需要循环将其他的他满足索引匹配的内容修改回来
            btns[i].innerHTML=i;
            //颜色改为来
            btns[i].style.backgroundColor="pink";
        }
    }

    
}

//小块切换的函数
function bind(id,items){
    items[id].onclick=function(){
       //点击小块切换到对应的图片 小块对应给变样式

        index = id;
        index--;//抵消切换函数中的++操作


       //自动切换
       change();

       //切换时如果换好的时间与自动切换时间刚搞一致或接近会导致图片刚切换就进入下一张
       //把定时函数清除 再调用  利用定义函数间隙达到切完后等待1.5s
       clearInterval(lb);

        //自动切换图片
        lb =  setInterval("change()",1500);

    }
    
}